<template>
  <el-dialog :title="userid ? '编辑房产' : '添加房产'" :visible="isShowDialog" @close="btnCancel">

    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item prop="category" label="分类">
        <el-select v-model="ruleForm.category" placeholder="房产分类">
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="经纪">
        <el-select v-model="ruleForm.agent" placeholder="经纪分类">
          <el-option
            v-for="item in angentList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="标签">
        <el-tag
          v-for="tag in ruleForm.tags"
          :key="tag"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="inputValue"
          class="input-new-tag"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="ruleForm.address" disabled />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="ruleForm.price" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="ruleForm.desc" />
      </el-form-item>
      <!-- 富文本 -->
      <el-form-item label="内容">
        <VueEditor v-model="ruleForm.content" />
      </el-form-item>
      <!-- 放置上传图片 -->
      <el-form-item label="介绍图片">
        <ImageUpload ref="refPhotos" :single="single=true" />
      </el-form-item>
      <el-form-item label="封面">
        <ImageUpload ref="refImage" />
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-row>

    </el-form></el-dialog>
</template>

<script>
// 富文本
import { VueEditor } from 'vue2-editor/dist/vue2-editor.core.js'
import { getCategories } from '@/api/category'
import { getAngentList } from '@/api/angent'
import { addPro, editPro, getProDate } from '@/api/properties'
import ImageUpload from './ImageUpload.vue'

export default {
  components: { ImageUpload, VueEditor },
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      ruleForm: {
        title: '',
        desc: '',
        image: '',
        agent: '',
        content: '',
        address: '广东省,广州市,天河区',
        price: '',
        photos: [],
        tags: [],
        category: ''
      },
      rules: {
        category: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      },
      userid: '',
      // 分类和经纪
      cateValue: '',
      cateList: [],
      angentValue: '',
      angentList: [],
      // 标签
      inputVisible: false,
      inputValue: ''
      // 图片多张判断
      // single: ''
    }
  },
  // computed: {
  //   showText() {
  //     return this.userid ? '编辑分类' : '添加分类'
  //   }
  // },
  created() {
    this.getCateList()
    this.getAngentList()
  },
  methods: {
    // 获取房产分类
    async getCateList() {
      const { data } = await getCategories()
      this.cateList = data
      // console.log(75, data)
    },
    // 获取经纪列表
    async getAngentList() {
      const { data } = await getAngentList()
      this.angentList = data
      // console.log(97, data)
    },
    // 标签的方法
    handleClose(tag) {
      this.ruleForm.tags.splice(this.ruleForm.tags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.ruleForm.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },

    async btnOK() {
    //  校验表单
      // await this.$refs.ruleForm.validate()
      // 介绍图片
      const fileListPhotos = this.$refs.refPhotos.fileList
      const imglist = []
      fileListPhotos.forEach(item => {
        imglist.push(item.url)
      })
      this.ruleForm.photos = imglist
      console.log(59, this.ruleForm.photos)
      // 封面的
      const fileListImage = this.$refs.refImage.fileList
      this.ruleForm.image = fileListImage[0].url
      console.log(59, this.ruleForm.image)

      console.log(59, this.ruleForm)

      //   发送请求
      if (this.userid) {
        console.log(187, this.ruleForm)
        await editPro(this.ruleForm)
      } else {
        await addPro(this.ruleForm)
      }

      //  await editCategories(this.ruleForm)

      //  提示用户
      this.$message.success('操作成功')
      //  关闭弹窗
      this.$emit('update:isShowDialog', false)
      //  更新页面
      this.$emit('close')
      this.$emit('show')
    },

    // 取消清除
    async btnCancel() {
      this.userid = ''
      this.ruleForm = {
        title: '',
        desc: '',
        image: '',
        agent: '',
        content: '',
        address: '广东省,广州市,天河区',
        price: '',
        photos: [],
        tags: [],
        category: ''
      }
      await this.$refs.ruleForm.resetFields()
      await this.$emit('update:isShowDialog', false)
      this.$refs.refPhotos.fileList = []
      this.$refs.refImage.fileList = []
    },

    // 回显
    async  DetailById(id) {
      this.userid = id
      const { data } = await getProDate(id)
      // console.log(95, data)
      this.ruleForm = data
      // 介绍图片
      this.ruleForm.photos.forEach((item) => {
        this.$refs.refPhotos.fileList.push({ url: item })
      })
      console.log(this.$refs.refPhotos.fileList)
      // 封面
      this.$refs.refImage.fileList = [
        {
          url: this.ruleForm.image
        }
      ]
    }
  }

}
</script>

<style lang="css">
/* 富文本样式 */
@import "~vue2-editor/dist/vue2-editor.css";
/* Import the Quill styles you want */
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';

::v-deep .VueEditor{
  width: 200px;
}
</style>
